<!--
 * @Author: your name
 * @Date: 2021-04-15 14:42:57
 * @LastEditTime: 2021-07-29 15:43:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\todoOrder\orderList.vue
-->
<template>
  <page-layout title="综合所得申报">
    <div style="background: #fff;padding:24px">
      <a-radio-group v-model="formState.navType" style="margin: 0 0 16px 0">
        <span>类型：</span>
        <a-radio-button v-for="(item,index) in waitTypeList" :key="index" :value="index">{{ item }} </a-radio-button>
      </a-radio-group>
      <a-row type="flex" justify="space-between">
        <a-form-model layout="inline" ref="searchToDo" name="searchToDo" style="margin-bottom: 20px">
          <a-form-model-item label="税款所属期">
            <a-month-picker style="width: 200px" :value="formState.taxMonth ? moment(formState.taxMonth, 'YYYY-MM') : ''" @change="onChangeMonth" placeholder="请选择税款所属期" />
          </a-form-model-item>
          <a-form-model-item label="缴纳实体">
            <a-select v-model="formState.payEntity" style="width: 200px" placeholder="请选择缴纳实体" allow-clear>
              <!-- <a-select-option :value="key" v-for="(value, key) in taskErrorType" :key="key">{{ value }}</a-select-option> -->
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-space :size="8">
              <a-button type="primary" icon="search" @click="onSearch">查询</a-button>
            </a-space>
          </a-form-model-item>
        </a-form-model>
        <a-space :size="14" style="margin-bottom: 20px">
          <a-button icon="export" :disabled="selectedRowKeys.length?false:true" @click="onOneReport">一键申报</a-button>
          <a-button icon="export" :disabled="selectedRowKeys.length?false:true" @click="onOnePay">一键缴纳</a-button>
        </a-space>
      </a-row>
      <a-table rowKey="id" :columns="columns" :data-source="dataSource" :scroll="{ x: true }" :row-selection="rowSelection" :pagination="{
                            current: formState.pageNum,
                            pageSize: formState.pageSize,
                            total: formState.total,
                            onChange: onPageChange,
                            onShowSizeChange: onSizeChange,
                        }" style="background: #fff">
        <a-badge slot="reportStatus" slot-scope="text" v-if="text" :color="text==1? 'gray' : text==2? 'blue' :'red'" :text="text==1? '待申报' : text==2? '已报税' :'报税异常'" />
        <template slot="operation" slot-scope="text, record">
          <a class="ant-dropdown-link" @click="onDetail(record)">详情</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link" @click="onReport(record)">申报</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link" @click="onPay(record)">缴纳</a>
        </template>
      </a-table>
      <drawer title="综合所得申报详情" ref="drawer" :visible.sync="detailDrawer">
        <reportDetail slot="content"></reportDetail>
      </drawer>
    </div>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout';
import reportDetail from './detail/reportDetail.vue'
import moment from 'moment';
import Drawer from '@/pages/components/drawer'
import datas from '@/utils/data';
export default {
  name: 'comprehensiveReport',
  components: { PageLayout, reportDetail, Drawer },
  data () {
    return {
      waitTypeList: ['不可申报', '待申报', '申报中', '申报异常', '待缴纳', '缴纳中', '缴纳异常', '待缴纳'],
      formState: {
        taxMonth: "", // 税款所属月
        payEntity: undefined, // 缴纳实体
        navType: 0, // 状态
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      detailDrawer: false,
      columns: datas.taxReportColumns,
      dataSource: [{}, {}],
      selectedRowKeys: [],
    };
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: selectedRowKeys => {
          this.selectedRowKeys = selectedRowKeys;
          // console.log(this.selectedRowKeys);
        },
      };
    },
  },
  methods: {
    moment,
    onChangeMonth (date, dateString) {
      this.formState.taxMonth = dateString;
    },
    onDetail (item) {
      this.detailDrawer = true;
    },
    onReport (item) {
      console.log(item);
    },
    onPay (item) {
      console.log(item);
    },
    onOneReport () { },
    onOnePay () { },
    onSearch () {
      console.log(this.formState);
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.pageListState.pageNum = page;
      this.pageListState.pageSize = pageSize;
    },
    onSizeChange (current, size) {
      this.pageListState.pageNum = 1;
      this.pageListState.pageSize = size;
    },
  },
  mounted () {

  },
};
</script>

<style lang="less" scoped>
.ant-col.ant-col-4 {
  width: 180px;
}
.ant-col.ant-col-20 {
  padding: 24px;
  flex: 1;
}
// .ant-avatar.button-icon /deep/img {
//   width: 25px !important;
//   height: 25px !important;
//   margin-top: 3px !important;
// }
</style>
